/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';
import MasonryList from './component/MasonryList';
import  {commonStyle}  from './component/commonStyle';
const itemWidth = (commonStyle.screenWidth - 45) / 2; //瀑布
export default class App extends Component {
  constructor(props){
    super(props);
    this.state={
      refreshing: false,
      data: [],
    }
  }
  componentDidMount(){
    this.onRefreshing()
}
onRefreshing = () => {//下拉刷新
    this.setState({
        refreshing: true,
    })
    let formData = new FormData();
    formData.append('page',1);   
    formData.append('count',10);
    formData.append('channel_category_id',this.props.items.channel_category_id) ; 
    formData.append('type',0);
    formData.append('is_app',1);
    formData.append('oauth_token',common.rundata.session.oauth_token);
    formData.append('oauth_token_secret',common.rundata.session.oauth_token_secret);
    fetch(common.urls.domain+"?"+common.urls.channelList , {      
        method: 'POST',      
        headers: {
            'Charset': 'utf-8',
            'Content-Type':'multipart/form-data',
        },      
        body: formData,    
    }).then((response) => {         
        if (response.ok) {          
            return response.json();      
        }    
    }).then((json) => { 
        console.log(json.data.feed_list)
        console.log(8888)     
        this.setState({
            refreshing:false,
            data:json.data.feed_list,
        })  
    }).catch((error) => {      
        console.error(error);    
    });
}
_onEndReached = () => {//上拉加载
    let formData = new FormData();
    formData.append('page',Math.ceil(this.state.data.length/10+1));   
    formData.append('count',10);
    formData.append('channel_category_id',this.props.items.channel_category_id) ; 
    formData.append('type',0);
    formData.append('is_app',1);
    formData.append('oauth_token',common.rundata.session.oauth_token);
    formData.append('oauth_token_secret',common.rundata.session.oauth_token_secret);
    fetch(common.urls.domain+"?"+common.urls.channelList , {      
        method: 'POST',      
        headers: {
            'Charset': 'utf-8',
            'Content-Type':'multipart/form-data',
        },      
        body: formData,    
    }).then((response) => {         
        if (response.ok) {          
            return response.json();      
        }    
    }).then((json) => { 
        console.log(json.data.feed_list)
        console.log(9999)     
        this.setState({
            refreshing:false,
            data:[...this.state.data,...json.data.feed_list]
        })  
    }).catch((error) => {      
        console.error(error);    
    });
}

_getHeightForItem = ({item}) => {//获取图片高
    return Math.max(itemWidth, itemWidth / item.image[0].attach_origin_width * item.image[0].attach_origin_height);
}
_renderItem = ({item}) => {
    const itemHeight = this._getHeightForItem({item});
    return (
        <TouchableOpacity 
            activeOpacity={0.8}
            onPress={() => this._onPressContent(item)}
            style={{marginRight:15,marginTop:15}}>
                <Image style={{width: itemWidth, height: itemHeight, borderRadius: 4}} source={{uri:item.image[0].attach_origin}}/>
                <View style={{backgroundColor:'#FFF',borderBottomColor:'#DDD',borderBottomWidth:0.6,padding:8}}>
                    <Text numberOfLines={5} style={{lineHeight:25,color:'#808080',}}>{item.content}</Text>
                    <View style={{flexDirection:'row',alignItems:'center'}}>
                        <Image style={{width:15,height:15}} source={require('../../../images/ic_anonymous_like.png')}/>
                        <Text style={{marginLeft:8}}>{item.Fabulous}</Text>
                    </View>
                </View>
              
                <View style={{flexDirection:'row',backgroundColor:'#FFF',padding:8,borderBottomLeftRadius:4,borderBottomRightRadius:4}}>
                    <TouchableOpacity activeOpacity={0.7} onPress={()=>{
                            navutil.push_navigator("MyPage",{uid:item.user_id})
                        }} style={{width:35}}>
                        <View style={{width:35,height:35,borderRadius:15}}>
                            <Image style={{width:35,height:35,borderRadius:15}} source={{uri:item.avatar_middle}}/>
                        </View>
                    </TouchableOpacity>
                    <View style={{flex:1}}>
                        <View style={{flexDirection:'row',alignItems:'center',marginLeft:8}}>
                            <View style={{flex:1}}>
                                <Text style={{fontSize:13,color:'black'}}>{item.user_name}</Text>
                            </View>
                        </View>
                    </View>
                </View>
        </TouchableOpacity>
    )
}
_onPressContent = (item) => {
    navutil.push_navigator('TjDetail',{id:item.feed_id})
}
render(){
    return(
           <View style={{flex:1,backgroundColor:'#DDD',paddingLeft:15,paddingBottom:15}}>
                    <MasonryList
                        data={this.state.data}
                        numColumns={2}
                        renderItem={this._renderItem}
                        getHeightForItem={this._getHeightForItem}
                        refreshing = {this.state.refreshing}
                        onRefresh = {this.onRefreshing}
                        onEndReachedThreshold={0.5}
                        onEndReached={this._onEndReached}
                        keyExtractor={(myItem,index)=>("index"+index)}
                        />
           </View>
    )
}
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#DDD',
  },
});
